<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>账务表单</title>
</head>
<body>
<%--account form page--%>
<div id="account_form_page" data-role="page" data-title="账务表单" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse">主页</a>

        <h1>账务表单</h1>
        <a href="javascript:void(0);" data-icon="arrow-l" data-rel="back">返回</a>
    </div>
    <div data-role="content">
        <form:form commandName="accountForm" id="account_form" data-ajax="false" onsubmit="return validateForm();">
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="type_select">类型:</label>
                        <select id="type_select" name="accountType.guid" data-native-menu="false">
                            <c:forEach items="${accountTypes}" var="type">
                                <option value="${type.guid}" ${accountForm.accountType.guid eq type.guid?'selected':''}>
                                        ${type.defaultType?'':'&gt;'}&nbsp;${type.name}
                                </option>
                            </c:forEach>
                        </select>
                        <span id="type_error" class="form_error" style="display: none;">类型为空</span>
                        <form:errors path="accountType.guid" cssClass="form_error"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="account_date">日期:</label>
                        <input type="text" name="accountDate" id="account_date" value="${accountForm.accountDate}"
                               placeholder="日期" required/>
                        <form:errors path="accountDate" cssClass="form_error"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="amount">金额:</label>
                        <input type="number" name="amount" id="amount" value="${accountForm.amount}" placeholder="金额"
                               required/>
                        <span id="amount_error" class="form_error" style="display: none;">金额为空</span>
                        <form:errors path="amount" cssClass="form_error"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="description">备注:</label>
                        <textarea rows="2" cols="30" name="description" id="description"
                                  placeholder="备注">${accountForm.description}</textarea>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                        <input type="hidden" name="addNext" value="false" id="add_next">
                        <button type="submit" data-theme="b" data-icon="plus">保存</button>
                        <a data-theme="b" data-icon="plus" data-role="button"
                           href="javascript:saveAndNext();">保存&继续添加</a>
                        <a href="overview" data-theme="c" data-icon="delete" data-role="button" data-transition="flip">取消</a>
                    </div>
                </li>
            </ul>
        </form:form>
    </div>

    <script type="text/javascript">
        function saveAndNext() {
            $("#add_next").val('true');
            $("#account_form").submit();
        }

        function validateForm() {
            var result = true;
            validateType();
            validateAmount();

            function validateAmount() {
                var $amount = $("#amount");
                if ('' == $amount.val()) {
                    $("#amount_error").show();
                    result = false;
                } else {
                    $("#amount_error").hide();
                }
            }

            function validateType() {
                var $type = $("#type_select");
                if ('' == $type.val()) {
                    $("#type_error").show();
                    result = false;
                } else {
                    $("#type_error").hide();
                }
            }

            if (result) {
                $.mobile.showPageLoadingMsg();
            }
            return result;
        }

        $("#account_form_page").live("pagecreate", function() {
            $("#account_date").scroller({
                preset: 'date',
                dateFormat: 'yy-mm-dd',
                dateOrder: 'ymmdd',
                theme:"jqm",
                lang:"zh",
                animate:"flip"
            });
        });

    </script>
</div>
</body>
</html>